<template>
	<jb-crud-page ref="pageRef" searchUrl="/embeddingResource/list" :conditions-align="'start'"
		:editComponent="ModelEdit" :searchConditions="pageConditions" @afterSearch="formatData">
		<template #conditions-form>
			<jb-input v-model:value="pageConditions.keywords" placeholder="请输入关键词搜索" style="width: 200px"></jb-input>
		</template>
		<template #opt>
			<jb-btn type="primary" secondary @click="pageRef.showEditModal('添加资源')">添加资源</jb-btn>
		</template>

		<template #default="{list,tableStartIndex}">
			<jb-table :data="list" :start-index="tableStartIndex" :row-config="{height: 100}">
				<jb-column type="seq" title="序号" width="60" fixed="left"></jb-column>
				<jb-column field="name" title="资源名称" min-width="160" fixed="left"></jb-column>
				<jb-column field="modelName" title="资源类型" min-width="160"></jb-column>
				<jb-column field="apiKey" title="apiKey" min-width="160">
					<template #default="{row}">
						<n-input v-if="row.apiKey" :bordered="false" :readonly="true" type="password"
							show-password-on="click" placeholder="apiKey" v-model:value="row.apiKey" />
						<span v-else>-</span>
					</template>
				</jb-column>
				<jb-column field="secretKey" title="secretKey" min-width="160">
					<template #default="{row}">
						<n-input v-if="row.secretKey" :bordered="false" :readonly="true" type="password"
							show-password-on="click" placeholder="apiKey" v-model:value="row.secretKey" />
						<span v-else>-</span>
					</template>
				</jb-column>
				<jb-column field="apiUrl" title="apiUrl" min-width="160"></jb-column>
				<jb-column field="dimension" title="dimension" min-width="160"></jb-column>
				<jb-column field="limits" title="频率限制" min-width="160">
					<template #default="{row}">
						<n-scrollbar style="max-height: 100px"
							v-if="row.formattedLimits && row.formattedLimits.length > 0">
							<div style="display: flex; flex-direction: column">
								<n-tag v-for="(formattedLimit, i) in row.formattedLimits" :key="i" type="info"
									style="margin-top: 5px">
									{{ formattedLimit }}
								</n-tag>
							</div>
						</n-scrollbar>
						<span v-else>无限制</span>
					</template>
				</jb-column>
				<jb-column field="createTime" title="创建时间" min-width="160"></jb-column>
				<jb-column field="sn" title="是否启用" min-width="160" fixed="right">
					<template #default="{ row }">
						<jb-switch v-model:value="row.enable" :url="`/embeddingResource/toggleEnable/${row.id}`"
							@update:value="pageRef.loadData()"></jb-switch>
					</template>
				</jb-column>

				<jb-column title="操作" width="120" fixed="right">
					<template #default="{ row }">
						<jb-btn class="mx-8px" tip-text="编辑资源" secondary circle type="warning" :icon="Icons.EDIT"
							@click="pageRef.showEditModal('编辑资源',{id:row.id})"></jb-btn>

						<jb-btn class="mx-8px" tip-text="删除资源" secondary circle type="error" :icon="Icons.DELETE"
							:confirmText="'确认删除该资源？'" :url="`/embeddingResource/del/${row.id}`"
							@success="pageRef.loadData()"></jb-btn>
					</template>

				</jb-column>

			</jb-table>
		</template>
	</jb-crud-page>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue'
	import ModelEdit from './cpns/model-edit.vue'
	import {
		useResetableData
	} from '@/hooks/common/use-resetable-data'
	import {
		Icons
	} from '@/constants'
	import {
		JBoltApi
	} from "@/service/request/index.js";

	// Expose
	const pageRef = ref(null)
	const pageConditions = useResetableData({
		keywords: ''
	})

	function handleModalYesClick({
		componentRef,
		close
	}) {
		componentRef.submit(() => {
			close()
			pageRef.value.loadData()
		})
	}

	const embeddingTypeList = ref([])
	onMounted(() => {
		JBoltApi.tryGet('/embeddingModelType/list').then(res => {
			embeddingTypeList.value = res.data
		}).catch(error => {
            console.error(error)
        })
	})

	function formatData(data) {
		if (data) {
			data.forEach(item => {
				item.limits = item.limits ? JSON.parse(item.limits) : [];
				item.formattedLimits = item.limits.map(limit => {
					const timesText = limit.times === 0 ? '无限制' : `${limit.times}次`;
					const unitText = limit.unit === 'day' ? '天' :
						limit.unit === 'hour' ? '小时' :
						'分钟';
					return `${timesText} / 每${unitText}`;
				});
			});
		}
		return data;
	}
</script>

<style scoped>
	.page-container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.content-card {
		flex: 1;
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.fixed-header {
		padding: 16px;
		background-color: #fff;
		border-bottom: 1px solid #f0f0f0;
		flex-shrink: 0;
	}

	.table-content {
		flex: 1;
		overflow-y: auto;
		padding: 0 16px;
	}

	.fixed-footer {
		padding: 16px;
		background-color: #fff;
		border-top: 1px solid #f0f0f0;
		display: flex;
		justify-content: flex-end;
		flex-shrink: 0;
	}

	.ml-2 {
		margin-left: 8px;
	}
</style>